window.onload = function () {
  //渲染学生成绩方法
  function initScore() {
    //发送ajax请求,获取所有成绩并渲染.
    axios({
      method: "get",
      url: "/score/list",
    }).then((res) => {
      console.log(res);
      if (res.status == 200 && res.data.code == 0) {
        let obj = res.data.data; //这是对象,里面有很多键值对, 一个键值对表示一个学生.
        let arr = [];
        for (let key in obj) {
          arr.push(`<tr data-id='${key}'>
                                <th scope="row">${key}</th>
                                <td>${obj[key].name}</td>
                                <td data-batch="1" class="score">${obj[key].score[0]}</td>
                                <td data-batch="2" class="score">${obj[key].score[1]}</td>
                                <td data-batch="3" class="score">${obj[key].score[2]}</td>
                                <td data-batch="4" class="score">${obj[key].score[3]}</td>
                                <td data-batch="5" class="score">${obj[key].score[4]}</td>
                            </tr>`);
        }
        document.querySelector("tbody").innerHTML = arr.join("");
      }
    });
  }
  initScore();

  //点击修改/增加学生成绩
  //事件委托的方式,给成绩单元格td注册事件.
  document.querySelector("tbody").addEventListener("click", function (e) {
    if (e.target.className == "score") {
      let td = e.target; //把当前点击的td单元格给存起来.
      let text = td.innerText; //把当前点击的td单元格原来的成绩给存起来.
      //判断一下:如果td没有input,才应该生成input追加.
      if (!td.querySelector("input")) {
        //把当前点击的td里面的内容给清空
        td.innerHTML = "";
        //创建input标签
        let input = document.createElement("input");
        //把原来td单元格的成绩赋值给input标签的value属性.
        input.value = text;
        //把生成的input标签追加到td单元格中去
        td.appendChild(input);
        //获得焦点
        input.focus();

        //给生成的input注册一个键盘事件,判断是否是回车键.
        input.addEventListener('keyup',function(e){
            if(e.key == 'Enter'){
                let newScore = input.value.trim();//拿到新输入的成绩
                if(isNaN(newScore) || newScore<0 || newScore >100){
                     toastr.warning('输入的成绩非法');
                     return;
                }
                //改/增成绩
                axios({
                    method:'post',
                    url:'/score/entry',
                    data:{
                        stu_id:td.parentNode.getAttribute('data-id'), //学生id
                        batch:td.getAttribute('data-batch'), //第几次考试
                        score:newScore //新成绩
                    }
                })
                .then((res)=>{
                    if(res.data.code == 0){
                        toastr.success('修改/新增成绩ok');
                        initScore();
                    }
                })
            }
        });

        //给创建出来的input设置失去焦点事件. 
        input.addEventListener('blur',function(){
            td.innerHTML = text;
        });
      }
    }
  });
};
